{%extends 'base.html'%}
{% block content %}
<head>
<script type="text/javascript" src="/my-media/js/jquery-1.3.2.js"></script>  
<script type="text/javascript" src="/my-media/js/jquery.js"></script>
<script type="text/javascript" src="/my-media/js/jquery.calculator.min.js"></script>

<style type="text/css">

#calculator { margin: 0pt auto; width: 165px; border: 3px double #000; padding: 3px; }
#calculator .result { padding-right: 5px; border: 1px solid #000; text-align: right; font-size: 18px; font-weight: bold; }
#calculator .digits ul {
  list-style-type: none;
  float: left;
  font-family: Courier;
  font-weight: bold;
  font-size: 14px;
  margin: 0pt;
  padding: 0pt;
}
#calculator .digits ul li {
  padding: 12px;
  margin: 3px;
  border: 1px solid #000;
  background-color: #eee;
  cursor: pointer;
}
  </style>
  <script type="text/javascript">

$(document).ready(function() {
  var digits = $('#calculator .digits ul li');
  var calculator = { left: false, right: false, result: 0, operator: '+' };
  function calculate() {
    calculator.result = eval(calculator.left + calculator.operator + calculator.right);
    $('#calculator .result').text(calculator.result);
    calculator.left = null;
    calculator.right = null;
    leftBuffer = '';
    rightBuffer = '';
  }
  function isDigit(key) {
    var digits = "0123456789";
    var digit = false;
    if(digits.indexOf(key) != -1)
      digit = true;
    return digit;
  }
  var leftBuffer = '';
  var rightBuffer = '';

  digits.click(function() {
    var key = $(this).text();;
    if(isDigit(key)) {
      if(calculator.left) {
        rightBuffer += key.toString();
        $('#calculator .result').text(rightBuffer);
      } else {
        leftBuffer += key.toString();
        $('#calculator .result').text(leftBuffer);
      }
    } else if(key != '=' && key != '.') {
      calculator.operator = key;
      calculator.left = leftBuffer;
    } else if(key == '.') {
      if(calculator.left) {
        rightBuffer += '.';
        $('#calculator .result').text(rightBuffer);
      } else {
        leftBuffer += '.';
        $('#calculator .result').text(leftBuffer);
      }
    } else {
      calculator.right = rightBuffer;
      if(calculator.left.substring(calculator.left.length-1, 1) == '.')
        calculator.left += '0';
      if(calculator.right.substring(calculator.right.length-1, 1) == '.')
        calculator.right += '0';
        
      calculate();
    }
  });
});
  </script>


</head>
<body>
<div id="left">

{% if user.is_authenticated %}

<p>Hello user : {{user}}</p>
<p>you have credit : {{useraccount.credit}}</p>
you can trade {{s.stock_name}}



<table>
<th>stock information</th> 
  <tr> 
 <td>Date</td> 
 <td>    {{ fluct.date}}</td> 
 </tr> 
 <tr> 
 <td>Price</td> 
 <td>    {{ fluct.price }}</td> 
 </tr> 
 <tr> 
 <td>Volume</td> 
 <td>    {{ fluct.volume }}</td> 
 </tr> 
 <tr> 
 <td>Change</td> 
 <td>    {{ fluct.change }}</td> 
 </tr> 
 <tr> 
 </tr>
 </table>


<form action="" method="POST">
{{ transactionform.as_p }}
<input type="submit" value="Submit" />
</form>
</div>
<div id="right">
<!--<script src="http://ajax.googleapis.com/ajax/libs/<b style="color:black;background-color:#ffff66">jquery</b>/1.3.2/<b style="color:black;background-color:#ffff66">jquery</b>.min.js" type="text/javascript">
</script> <script type="text/javascript">
$(function () { $.getJSON("http://www.onlinecurrencyconverter.net/ofxt-currency-converter/?selectBox=true&bTrip=usd&aTrip=gbp&adSize=250x250&alertColor=FFFFCF&alphabetBackgroundColor=e4e4e4&tripBackgroundColor=DFDFCF&jsoncallback=?", function(data){ $('div#oft-currency-converter-widget').html(data.currencyConverter); }); }); 
</script>
--><div id="oft-currency-converter-widget"></div>
<div id="calculator">
<div class="result">0</div>
<div class="digits">
  <ul><li>7</li><li>4</li><li>1</li><li>0</li></ul>
  <ul><li>8</li><li>5</li><li>2</li><li>.</li></ul>
  <ul><li>9</li><li>6</li><li>3</li><li>=</li></ul>
  <ul><li>+</li><li>-</li><li>*</li><li>/</li></ul>
</div>
<div style="clear: both;"></div>
</div>

		
{%endif%}
</div>
<div style="clear: both; display: block; padding: 70px 0; text-align:center;">
</div>
</body>
{%endblock%}